<template>
  <div class="product-wrapper">
    <div v-for="item in items" :key="item.headerContent" class="item-wrapper">
      <div :style="{ background: item.headerBg }" class="item-header">
        {{ item.headerContent }}
      </div>
      <div class="item-content-wrapper">
        <div
          v-for="order in item.data"
          :key="order.id"
          class="item-content-detail"
          :class="{
            'product-warn': order.c_status === 1,
            'product-error': order.c_status === 2,
          }"
        >
          <div>{{ order.no }}</div>
          <div>{{ order.name }}{{ order.total }}</div>
          <div style="display: flex; align-items: end">
            {{ order.worker_name
            }}<span
              style="
                font-size: 24px;
                height: 50px;
                color: #999;
                position: relative;
                top: 16px;
                left: 5px;
              "
            >
              配送</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { io } from "socket.io-client";
import * as dayjs from "dayjs";

const items = ref([
  {
    headerBg: "#F54A45",
    headerContent: "制作中",
    data: [],
  },
  {
    headerBg: "#34C724",
    headerContent: "配送中",
    data: [],
  },
  {
    headerBg: "#3370FF",
    headerContent: "已完成",
    data: [],
  },
]);
onMounted(() => {
  const socket = io("wss://2ij0480151.vicp.fun/order", {
    transports: ["websocket"],
  });
  socket.on("connect", (...args) => {
    console.log(args);
  });
  setTimeout(() => {
    window.electron &&
    window.electron.ipcRenderer
      .invoke("context")
      .then((res) => {
        // 支付完成事件
        socket.on(`message_${res.store_id}_pay`, (d) => {
          console.log("支付完成", d);
          items.value[0].data.push({ ...d, c_status: 0 });
        });
        // 制作完成事件
        socket.on(`message_${res.store_id}_manufactor`, (d) => {
          console.log("制作完成", d);
          // 减掉制作中的订单
          const data = items.value[0].data;
          const index = data.find((x) => x.id === d.id);
          if (index) {
            data.splice(index, 1);
          }
          items.value[1].data.push({ ...d, c_status: 0 });
        });
        // 配送完成事件
        socket.on(`message_${res.store_id}_delivery`, (d) => {
          console.log("配送完成", d);
          const data = items.value[1].data;
          const index = data.find((x) => x.id === d.id);
          if (index) {
            data.splice(index, 1);
          }
          items.value[2].data.push({ ...d, c_status: 0 });
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }, 1000)

  setInterval(() => {
    items.value.forEach((item) => {
      const d = item.data;
      d.forEach((x) => {
        let diff;
        if (item.headerContent === "制作中") {
          const skus = x.skus && JSON.parse(x.skus || "[]");
          const makeTime = skus[0]?.make_time || 5;
          diff = dayjs().diff(dayjs(x.pay_complete_at), "minute");
          if (makeTime) {
            if (diff >= makeTime && diff < makeTime + 3) {
              x.c_status = 1;
            } else if (diff >= makeTime + 3) {
              x.c_status = 2;
            }
          }
        } else if (item.headerContent === "配送中") {
          diff = dayjs().diff(dayjs(x.manufactor_complete_at), "minute");
          if (diff >= 3 && diff < 6) {
            x.c_status = 1;
          } else if (diff >= 6) {
            x.c_status = 2;
          }
        }
      });
      if (item.headerContent === "已完成") {
        d.splice(5, d.length - 5);
      }
    });
  }, 1000 * 30);
});

const loadTableData = async () => {
  // @todo
};
</script>

<style scoped>
.product-wrapper {
  width: 100vw;
  height: 100vh;
  background: url("../public/imgs/product_bg.svg");
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 2%;
  box-sizing: border-box;
}
.item-wrapper {
  height: 95%;
  flex: 1;
  margin-left: 2%;
}
.item-header {
  height: 200px;
  font-size: 90px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 20px 20px 0 0;
}
.item-content-wrapper {
  font-size: 32px;
  background-color: white;
  padding-top: 10px;
}
.item-content-detail:nth-child(even) {
  background-color: #f4f8fb;
}
.item-content-detail {
  display: flex;
  align-items: center;
  height: 126px;
  box-sizing: border-box;
  padding-left: 5%;
  justify-content: space-between;
  padding-right: 5%;
}
.product-warn {
  background-color: #ffee97 !important;
}
.product-error {
  background-color: #ffd1d0 !important;
}
</style>
